<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js"></script>  
    <style>
        .aa{
            color:red;
        }
        .bb{
            background: #ccc;
        }
        .cc{
            font-size: 30px;
        }
        .success{
            color:green;
        }
        .error{
            color:red;
        }
        body{
            margin-bottom:300px;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 
            普通属性的绑定
         -->
        <!-- <img v-bind:src="url"> -->
        <!-- 缩写、同时绑定多个属性 -->
        <img v-bind:src="url" :title="title" v-bind="{width:width,height:height}">
        <button @click="url='https://cn.vuejs.org/images/logo.png'">更换图片</button>
        <hr>

        <!-- 
            boolean类型属性的绑定
         -->
        <input type="text" value="hello" :disabled="flag"> 
        <input type="text" value="hello" :readonly="flag"> 
        <hr>

        <!-- 
            class属性的绑定
         -->
        <!-- 用法1：string形式 -->
        <p :class="'aa'">welcome</p> 
        <p :class="classStr">welcome</p> 

        <!-- 用法2：Array形式 -->
        <p :class="['aa','bb','cc']">welcome</p>
        <p :class="classArr">welcome</p>

        <!-- 用法3：Object形式，{key:value}，key表达样式名，value为boolean值，表达是否应用该样式 -->
        <p :class="{aa:true,bb:flag}">welcome</p>
        <p :class="classObj">welcome</p>
        <input type="text" @input="check($event.target.value)" :class="{success:flag,error:!flag}">
        <hr>

        <!-- 
            style属性的绑定
         -->
        <!-- 用法1：string形式 --> 
        <p :style="'color:blue;font-size:30px;'">hello</p> 
        <p :style="styleStr">hello</p> 

        <!-- 用法2：Object形式 -->
        <p :style="styleObj">hello</p>

        <!-- 用法3：Array形式，对象数组 -->
        <p :style="[styleObj1,styleObj2]">hello</p>
        <hr>

        <!-- 
            修饰符
                .prop 用于绑定DOM属性
         -->
        <p :class-name.prop="classStr">world</p> 
        <p :inner-html.prop="title"></p>
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            url:'https://www.baidu.com/img/bd_logo1.png',
            title:'嘿嘿',
            width:'200px',
            height:'100px',
            flag:false,
            classStr:'aa',
            classArr:['aa','bb','cc'],
            classObj:{
                aa:true,
                bb:this.flag
            },
            // inputClass:'error'
            styleStr:'color:blue;font-size:30px;',
            styleObj:{
                color:'blue',
                // 'font-size':'40px'
                fontSize:'40px'
            },
            styleObj1:{
                color:'green'
            },
            styleObj2:{
                background:'#ccc'
            }
        },
        methods: {
            check(value){
                // if(value.length>=6 && value.length<=10){
                //     this.inputClass="success";
                // }else{
                //     this.inputClass='error';
                // }
                this.flag=value.length>=6 && value.length<=10;
            }
        },
    })
</script>
</html>